<!DOCTYPE html>
<html>
<head>
<title>Static Force Analysis Diagram</title>
</head>
<body>
<canvas id="myCanvas" width="700" height="400" style="border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
ctx.fillStyle = "black";

// Coordinates calculated based on the problem description
const A = { x: 210, y: 50 };
const E = { x: 490, y: 50 };
const F = { x: 350, y: 50 };
const B = { x: 290, y: 110 };
const D = { x: 410, y: 110 };
const C = { x: 350, y: 190 };

const blockRopeLength = 40;
const blockTopY = C.y + blockRopeLength;
const blockWidth = 50;
const blockHeight = 50;
const blockX = C.x - blockWidth / 2;
const blockY = blockTopY;

// Draw ceiling line AE
ctx.beginPath();
ctx.moveTo(A.x, A.y);
ctx.lineTo(E.x, E.y);
ctx.stroke();

// Draw strings ABCDE
ctx.beginPath();
ctx.moveTo(A.x, A.y);
ctx.lineTo(B.x, B.y);
ctx.lineTo(C.x, C.y);
ctx.lineTo(D.x, D.y);
ctx.lineTo(E.x, E.y);
ctx.stroke();

// Draw vertical string for mass m
ctx.beginPath();
ctx.moveTo(C.x, C.y);
ctx.lineTo(C.x, blockTopY);
ctx.stroke();

// Draw mass m block
ctx.beginPath();
ctx.rect(blockX, blockY, blockWidth, blockHeight);
ctx.stroke();

// Draw masses at B and D (filled circles)
ctx.beginPath();
ctx.arc(B.x, B.y, 4, 0, 2 * Math.PI);
ctx.fill();

ctx.beginPath();
ctx.arc(D.x, D.y, 4, 0, 2 * Math.PI);
ctx.fill();

// Draw dashed line FC
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(F.x, F.y);
ctx.lineTo(C.x, C.y);
ctx.stroke();
ctx.setLineDash([]); // Reset to solid line

// --- Labels ---

// Helper function to draw m with subscript 0
function draw_m0(x, y) {
    ctx.font = "20px Arial";
    ctx.fillText("m", x, y);
    ctx.font = "14px Arial";
    ctx.fillText("0", x + 12, y + 7);
}

// Point labels
ctx.font = "20px Arial";
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText('A', A.x - 5, A.y - 2);

ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('B', B.x, B.y - 5);

ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText('C', C.x + 5, C.y);

ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillText('D', D.x, D.y - 5);

ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
ctx.fillText('E', E.x + 5, A.y - 2);

ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
ctx.fillText('F', F.x + 5, F.y);

// Length labels
ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("14 m", (A.x + E.x) / 2, A.y - 20);
ctx.fillText("5 m", 245, 80); // AB
ctx.fillText("5 m", 305, 150); // BC
ctx.fillText("5 m", 395, 150); // CD
ctx.fillText("5 m", 455, 80); // DE

ctx.textAlign = "left";
ctx.fillText("7 m", F.x + 10, (F.y + C.y) / 2);

// Mass labels
draw_m0(B.x + 15, B.y - 5); // Label near B
draw_m0(D.x - 35, D.y - 5); // Label near D

ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.fillText("m", C.x, blockY + blockHeight / 2);

// Caption
ctx.font = "24px KaiTi";
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
ctx.fillText("力图 5.7.1", canvas.width / 2, canvas.height - 20);

</script>
</body>
</html>